<template>
  <div class="bubble-game" :class="{ fullscreen: isFullscreen }">
    <!-- 游戏标题 -->
    <div class="game-header">
      <div class="header-top">
        <h1 class="game-title">泡泡舞会</h1>
        <!-- 使用全局全屏切换组件 -->
        <FullscreenToggle />
      </div>
    </div>

    <!-- 破灭泡泡列表 -->
    <div class="popped-bubbles-list" v-if="poppedBubblesList.length > 0">
      <h3 class="list-title">已破泡泡</h3>
      <div class="bubbles-list">
        <div 
          v-for="(bubble, index) in poppedBubblesList" 
          :key="bubble.id"
          class="popped-bubble-item"
          :style="{ animationDelay: index * 0.1 + 's' }"
        >
          <div class="bubble-number">{{ poppedBubblesList.length - index }}</div>
          <div class="bubble-image">
            <img :src="bubble.fruit.image" :alt="bubble.fruit.text" />
          </div>
          <div class="bubble-name">{{ bubble.fruit.text }}</div>
          <button 
            @click="restoreBubble(bubble, index)"
            class="restore-btn"
            title="恢复泡泡"
          >
            ↶
          </button>
        </div>
      </div>
    </div>

    <!-- 游戏区域 -->
    <div class="game-area" ref="gameArea">
      <!-- 泡泡容器 -->
      <div class="bubbles-container">
        <div
          v-for="bubble in bubbles"
          :key="bubble.id"
          :class="['bubble', { 'bubble-popped': bubble.isPopped }]"
          :data-bubble-id="bubble.id"
          :style="{
            left: bubble.x + 'px',
            top: bubble.y + 'px',
            width: bubble.size + 'px',
            height: bubble.size + 'px',
            backgroundColor: bubble.color,
            animationDelay: bubble.animationDelay + 's'
          }"
          @click="popBubble(bubble)"
        >
          <div class="bubble-inner"></div>
        </div>
      </div>
      
      <!-- 调试信息 -->
      <div v-if="bubbles.length === 0" class="debug-info">
        <p>正在加载泡泡...</p>
      </div>

      <!-- 水果显示区域 -->
      <div v-if="currentFruit" class="fruit-display" :class="{ 'fruit-show': showFruit }">
        <div class="fruit-content">
          <div class="fruit-image">
            <img :src="currentFruit.image" :alt="currentFruit.text" class="fruit-img" />
          </div>
          <div class="fruit-text">{{ currentFruit.text }}</div>
        </div>
      </div>

      <!-- 游戏结束提示 -->
      <div v-if="remainingBubbles === 0" class="game-complete">
        <h2>🎉 恭喜你成为泡泡王国的一员</h2>
        <button @click="restartGame" class="btn btn-primary">重新开始</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import FullscreenToggle from '@/components/FullscreenToggle.vue'
import { useFullscreen } from '@/composables/useFullscreen'

// 游戏区域引用
const gameArea = ref(null)

// 游戏状态
const bubbles = ref([])
const poppedBubbles = ref(0)
const currentFruit = ref(null)
const showFruit = ref(false)
const totalFruits = ref(0)
// 使用全局全屏功能
const { isFullscreen } = useFullscreen()
const poppedBubblesList = ref([])

// 导入水果图片
import pingguoImg from '@/assets/images/pingguo.png'
import xiangjiaoImg from '@/assets/images/xiangjiao.png'
import chengziImg from '@/assets/images/chengzi.png'
import putaoImg from '@/assets/images/putao.png'
import caomeiImg from '@/assets/images/caomei.png'
import taoziImg from '@/assets/images/taozi.png'
import boluoImg from '@/assets/images/boluo.png'
import mihoutaoImg from '@/assets/images/mihoutao.png'
import xiguaImg from '@/assets/images/xigua.png'
import ningmengImg from '@/assets/images/ningmeng.png'
import mangguoImg from '@/assets/images/mangguo.png'
import yingtaoImg from '@/assets/images/yingtao.png'
import yeziImg from '@/assets/images/yezi.png'
import hamiguaImg from '@/assets/images/hamigua.png'
import liziImg from '@/assets/images/lizi.png'
import niuyouguoImg from '@/assets/images/niuyouguo.png'
import fanqieImg from '@/assets/images/fanqie.png'
import lanmeiImg from '@/assets/images/lanmei.png'

// 水果数据
const fruits = [
  { image: pingguoImg, text: '苹果泡泡', color: '#ff6b6b' },
  { image: xiangjiaoImg, text: '香蕉泡泡', color: '#ffd93d' },
  { image: chengziImg, text: '橙子泡泡', color: '#ff8c42' },
  { image: putaoImg, text: '葡萄泡泡', color: '#9b59b6' },
  { image: caomeiImg, text: '草莓泡泡', color: '#e74c3c' },
  { image: taoziImg, text: '桃子泡泡', color: '#ff9ff3' },
  { image: boluoImg, text: '菠萝泡泡', color: '#f1c40f' },
  { image: mihoutaoImg, text: '猕猴桃泡泡', color: '#2ecc71' },
  { image: xiguaImg, text: '西瓜泡泡', color: '#27ae60' },
  { image: ningmengImg, text: '柠檬泡泡', color: '#f39c12' },
  { image: mangguoImg, text: '芒果泡泡', color: '#e67e22' },
  { image: yingtaoImg, text: '樱桃泡泡', color: '#c0392b' },
  { image: yeziImg, text: '椰子泡泡', color: '#ecf0f1' },
  { image: hamiguaImg, text: '哈密瓜泡泡', color: '#1abc9c' },
  { image: liziImg, text: '梨子泡泡', color: '#f4d03f' },
  { image: niuyouguoImg, text: '牛油果泡泡', color: '#16a085' },
  { image: fanqieImg, text: '番茄泡泡', color: '#e74c3c' },
  { image: lanmeiImg, text: '蓝莓泡泡', color: '#6b46c1' }
]

// 计算属性
const remainingBubbles = computed(() => bubbles.value.filter(bubble => !bubble.isPopped).length)

// 泡泡颜色数组
const bubbleColors = [
  '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57',
  '#ff9ff3', '#54a0ff', '#5f27cd', '#00d2d3', '#ff9f43',
  '#10ac84', '#ee5a24', '#0984e3', '#6c5ce7', '#a29bfe',
  '#fd79a8', '#fdcb6e', '#e17055', '#81ecec', '#74b9ff'
]

// 创建泡泡
const createBubble = (id, assignedFruit) => {
  // 优化泡泡尺寸分布，更多中等大小的泡泡
  const getBubbleSize = () => {
    const rand = Math.random()
    if (rand < 0.3) {
      // 30% 概率生成小泡泡 (80-90px)
      return Math.random() * 10 + 80
    } else if (rand < 0.7) {
      // 40% 概率生成中等泡泡 (90-105px)
      return Math.random() * 15 + 90
    } else {
      // 30% 概率生成大泡泡 (105-120px)
      return Math.random() * 15 + 105
    }
  }
  
  if (!gameArea.value) {
    // 如果游戏区域还没有准备好，使用默认尺寸
    const bubbleSize = getBubbleSize()
    return {
      id,
      x: Math.random() * 400,
      y: Math.random() * 300,
      size: bubbleSize,
      color: bubbleColors[Math.floor(Math.random() * bubbleColors.length)],
      isPopped: false,
      animationDelay: Math.random() * 2,
      vx: (Math.random() - 0.5) * 2, // 水平速度
      vy: (Math.random() - 0.5) * 2, // 垂直速度
      fruit: assignedFruit || fruits[Math.floor(Math.random() * fruits.length)]
    }
  }
  
  const gameAreaRect = gameArea.value.getBoundingClientRect()
  const bubbleSize = getBubbleSize()
  const margin = 5
  const maxX = gameAreaRect.width - bubbleSize - margin
  const maxY = gameAreaRect.height - bubbleSize - margin
  
  return {
    id,
    x: Math.random() * maxX,
    y: Math.random() * maxY,
    size: bubbleSize,
    color: bubbleColors[Math.floor(Math.random() * bubbleColors.length)],
    isPopped: false,
    animationDelay: Math.random() * 2,
    vx: (Math.random() - 0.5) * 2, // 水平速度
    vy: (Math.random() - 0.5) * 2, // 垂直速度
    fruit: assignedFruit || fruits[Math.floor(Math.random() * fruits.length)]
  }
}

// 初始化游戏
const initGame = () => {
  bubbles.value = []
  poppedBubbles.value = 0
  currentFruit.value = null
  showFruit.value = false
  totalFruits.value = 0
  poppedBubblesList.value = []
  
  // 创建水果的随机排列，确保每个水果只出现一次
  const shuffledFruits = [...fruits].sort(() => Math.random() - 0.5)
  
  // 创建18个泡泡，每个都有不同的水果
  for (let i = 0; i < 18; i++) {
    bubbles.value.push(createBubble(i, shuffledFruits[i % shuffledFruits.length]))
  }
  
  console.log('泡泡已创建:', bubbles.value.length)
}

// 点击泡泡
const popBubble = async (bubble) => {
  if (bubble.isPopped) return
  
  bubble.isPopped = true
  poppedBubbles.value++
  
  // 将破灭的泡泡添加到列表的开头
  poppedBubblesList.value.unshift({
    ...bubble,
    poppedAt: Date.now()
  })
  
  // 显示水果
  currentFruit.value = bubble.fruit
  showFruit.value = true
  totalFruits.value++
  
  // 3秒后隐藏水果
  setTimeout(() => {
    showFruit.value = false
    setTimeout(() => {
      currentFruit.value = null
    }, 500)
  }, 2000)
}

// 重新开始游戏
const restartGame = () => {
  initGame()
}

// 恢复泡泡到游戏区域
const restoreBubble = (bubble, index) => {
  // 从破灭列表中移除
  poppedBubblesList.value.splice(index, 1)
  
  // 更新游戏状态
  poppedBubbles.value--
  
  // 恢复泡泡到游戏区域
  const restoredBubble = bubbles.value.find(b => b.id === bubble.id)
  if (restoredBubble) {
    restoredBubble.isPopped = false
    // 重新生成位置（避免重叠）
    if (gameArea.value) {
      const gameAreaRect = gameArea.value.getBoundingClientRect()
      const margin = 5
      const maxX = gameAreaRect.width - restoredBubble.size - margin
      const maxY = gameAreaRect.height - restoredBubble.size - margin
      restoredBubble.x = Math.random() * maxX + margin
      restoredBubble.y = Math.random() * maxY + margin
    }
    
    // 添加恢复动画效果
    nextTick(() => {
      const bubbleElement = document.querySelector(`[data-bubble-id="${bubble.id}"]`)
      if (bubbleElement) {
        bubbleElement.classList.add('bubble-restored')
        setTimeout(() => {
          bubbleElement.classList.remove('bubble-restored')
        }, 1000)
      }
    })
  }
}

// 监听全屏状态变化
const handleFullscreenChange = () => {
  // 全屏状态变化时重新计算游戏区域高度
  if (isFullscreen.value) {
    nextTick(() => {
      updateGameAreaHeight()
    })
  }
}

// 动态计算游戏区域高度
const updateGameAreaHeight = () => {
  if (!gameArea.value) return
  
  const gameAreaElement = gameArea.value
  const gameAreaRect = gameAreaElement.getBoundingClientRect()
  const viewportHeight = window.innerHeight
  
  // 获取游戏区域相对于视口的位置
  const gameAreaTop = gameAreaRect.top
  const bottomMargin = 10 // 底部边距
  
  // 计算实际可用的游戏区域高度
  const availableHeight = viewportHeight - gameAreaTop - bottomMargin
  
  // 确保最小高度
  const minHeight = 200
  const finalHeight = Math.max(availableHeight, minHeight)
  
  if (finalHeight > 0) {
    gameAreaElement.style.height = `${finalHeight}px`
    console.log(`游戏区域高度更新: ${finalHeight}px`)
  }
}

// 泡泡运动动画
let animationId = null

const animateBubbles = () => {
  if (!gameArea.value) return
  
  const gameAreaRect = gameArea.value.getBoundingClientRect()
  
  bubbles.value.forEach(bubble => {
    if (bubble.isPopped) return
    
    // 更新位置
    bubble.x += bubble.vx
    bubble.y += bubble.vy
    
    // 边界检测和反弹，增加边距确保泡泡完全可见
    const margin = 5
    const maxX = gameAreaRect.width - bubble.size - margin
    const maxY = gameAreaRect.height - bubble.size - margin
    
    if (bubble.x <= margin || bubble.x >= maxX) {
      bubble.vx = -bubble.vx
      bubble.x = Math.max(margin, Math.min(maxX, bubble.x))
    }
    
    if (bubble.y <= margin || bubble.y >= maxY) {
      bubble.vy = -bubble.vy
      bubble.y = Math.max(margin, Math.min(maxY, bubble.y))
    }
  })
  
  animationId = requestAnimationFrame(animateBubbles)
}

// 生命周期钩子
onMounted(() => {
  nextTick(() => {
    // 延迟一点时间确保DOM完全渲染
    setTimeout(() => {
      initGame()
      animateBubbles()
    }, 100)
  })
  
  // 监听全屏状态变化
  document.addEventListener('fullscreenchange', handleFullscreenChange)
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    if (isFullscreen.value) {
      updateGameAreaHeight()
    }
  })
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  
  // 移除全屏事件监听
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
  
  // 移除窗口大小变化监听
  window.removeEventListener('resize', updateGameAreaHeight)
})
</script>

<style lang="less" scoped>
.bubble-game {
  min-height: 100vh;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  
  // 全屏状态样式
  &.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 0.5rem 1rem;
    z-index: 9999;
    
    .game-header {
      margin-bottom: 1rem;
      padding: 1rem 0;
      
      .header-top {
        margin-bottom: 0.75rem;
      }
      
      .game-title {
        font-size: 2.5rem;
      }
      
      
      .game-description {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
      }
      
      .game-stats {
        gap: 1rem;
        
        .stat {
          padding: 0.5rem 1rem;
          
          .stat-label {
            font-size: 1rem;
            margin-bottom: 0.25rem;
          }
          
          .stat-value {
            font-size: 1.6rem;
          }
        }
      }
    }
    
    .game-area {
      height: calc(100vh - 200px);
      border-radius: 10px;
      min-height: 300px;
    }
  }

  .game-header {
    text-align: center;
    margin-bottom: 2rem;
    color: white;
    
    .header-top {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      margin-bottom: 1rem;
    }
    
    .game-title {
      font-size: 3.5rem;
      margin: 0;
      font-weight: 800;
      text-shadow: 3px 3px 6px rgba(255, 182, 193, 0.5);
      animation: titleBounce 2s ease-in-out infinite;
      color: #ff6b9d;
      font-family: 'Comic Sans MS', cursive, sans-serif;
    }
    
    
    .game-description {
      font-size: 1.4rem;
      margin-bottom: 2rem;
      opacity: 0.95;
      color: #8b5a96;
      font-weight: 600;
      text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
      font-family: 'Comic Sans MS', cursive, sans-serif;
    }
    
    .game-stats {
      display: flex;
      justify-content: center;
      gap: 3rem;
      
      .stat {
        background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
        padding: 1.2rem 2.2rem;
        border-radius: 30px;
        backdrop-filter: blur(10px);
        border: 3px solid #ff6b9d;
        box-shadow: 0 8px 20px rgba(255, 107, 157, 0.3);
        animation: statPulse 3s ease-in-out infinite;
        
        .stat-label {
          display: block;
          font-size: 1.1rem;
          margin-bottom: 0.5rem;
          opacity: 0.9;
          color: #8b5a96;
          font-weight: 700;
          font-family: 'Comic Sans MS', cursive, sans-serif;
        }
        
        .stat-value {
          display: block;
          font-size: 2.5rem;
          font-weight: 900;
          color: #ff6b9d;
          text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
          font-family: 'Comic Sans MS', cursive, sans-serif;
        }
      }
    }
  }

  .game-area {
    position: relative;
    width: 100%;
    height: 70vh;
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.3) 0%, rgba(255, 218, 185, 0.3) 100%);
    border-radius: 25px;
    backdrop-filter: blur(15px);
    border: 4px solid #ff6b9d;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(255, 107, 157, 0.4);
    animation: gameAreaGlow 4s ease-in-out infinite alternate;
  }

  .bubbles-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .debug-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2rem;
    text-align: center;
  }

  .popped-bubbles-list {
    position: fixed;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    border-radius: 20px;
    padding: 1.2rem;
    box-shadow: 0 12px 40px rgba(255, 107, 157, 0.4);
    backdrop-filter: blur(15px);
    border: 3px solid #ff6b9d;
    max-width: 320px;
    max-height: 35vh;
    overflow-y: auto;
    z-index: 1000;
    animation: listFloat 3s ease-in-out infinite;
    
    .list-title {
      margin: 0 0 1rem 0;
      color: #8b5a96;
      font-size: 1.3rem;
      font-weight: 800;
      text-align: center;
      border-bottom: 3px solid #ff6b9d;
      padding-bottom: 0.5rem;
      font-family: 'Comic Sans MS', cursive, sans-serif;
      text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    }
    
    .bubbles-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      
      .popped-bubble-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.8rem;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 218, 185, 0.9) 100%);
        border-radius: 15px;
        border: 2px solid #ff6b9d;
        animation: slideInFromTop 0.6s ease-out;
        transition: all 0.4s ease;
        box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2);
        
        &:hover {
          background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 218, 185, 1) 100%);
          transform: translateX(8px) scale(1.02);
          box-shadow: 0 6px 20px rgba(255, 107, 157, 0.4);
        }
        
        .bubble-number {
          background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
          color: white;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.9rem;
          font-weight: 900;
          flex-shrink: 0;
          box-shadow: 0 3px 10px rgba(255, 107, 157, 0.4);
          border: 2px solid #fff;
          font-family: 'Comic Sans MS', cursive, sans-serif;
        }
        
        .bubble-image {
          flex-shrink: 0;
          animation: imageBounce 2s ease-in-out infinite;
          img {
            width: 32px;
            height: 32px;
            object-fit: contain;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.8);
            padding: 2px;
          }
        }
        
        .bubble-name {
          color: #8b5a96;
          font-size: 1rem;
          font-weight: 700;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-family: 'Comic Sans MS', cursive, sans-serif;
          text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
        }
        
        .restore-btn {
          background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
          color: white;
          border: 2px solid #fff;
          border-radius: 50%;
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 1.2rem;
          font-weight: bold;
          transition: all 0.4s ease;
          flex-shrink: 0;
          box-shadow: 0 3px 10px rgba(78, 205, 196, 0.4);
          animation: restoreBtnPulse 2s ease-in-out infinite;
          
          &:hover {
            background: linear-gradient(135deg, #45b7aa 0%, #3d8b7a 100%);
            transform: scale(1.15) rotate(10deg);
            box-shadow: 0 5px 15px rgba(78, 205, 196, 0.6);
          }
          
          &:active {
            transform: scale(0.9) rotate(-5deg);
          }
        }
      }
    }
  }

  .bubble {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s ease;
    animation: bubbleFloat 3s ease-in-out infinite;
    box-shadow: 0 6px 20px rgba(255, 107, 157, 0.3);
    min-width: 85px;
    min-height: 85px;
    border: 3px solid rgba(255, 255, 255, 0.6);
    // 增加点击区域
    &::after {
      content: '';
      position: absolute;
      top: -12px;
      left: -12px;
      right: -12px;
      bottom: -12px;
      border-radius: 50%;
      z-index: -1;
    }
    
    &:hover {
      transform: scale(1.2) rotate(5deg);
      box-shadow: 0 10px 30px rgba(255, 107, 157, 0.5);
      filter: brightness(1.2) saturate(1.3);
      border-color: rgba(255, 255, 255, 0.9);
    }
    
    &:active {
      transform: scale(0.9) rotate(-3deg);
    }
    
    &.bubble-popped {
      animation: bubblePop 0.6s ease-out forwards;
      pointer-events: none;
    }
    
    &.bubble-restored {
      animation: bubbleRestore 1s ease-out;
    }
    
    .bubble-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), transparent 60%);
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 25%;
        left: 25%;
        width: 25%;
        height: 25%;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        filter: blur(2px);
        animation: bubbleShine 2s ease-in-out infinite;
      }
      
      &::after {
        content: '✨';
        position: absolute;
        top: 15%;
        right: 15%;
        font-size: 0.8rem;
        animation: sparkle 1.5s ease-in-out infinite;
      }
    }
  }

  .fruit-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 1000;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    &.fruit-show {
      transform: translate(-50%, -50%) scale(1);
    }
    
    .fruit-content {
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
      padding: 2.5rem 4rem;
      border-radius: 25px;
      text-align: center;
      box-shadow: 0 15px 40px rgba(255, 107, 157, 0.4);
      backdrop-filter: blur(15px);
      border: 4px solid #ff6b9d;
      animation: fruitDisplayGlow 2s ease-in-out infinite alternate;
      
      .fruit-image {
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .fruit-img {
          width: 80px;
          height: 80px;
          object-fit: contain;
          display: block;
          animation: fruitBounce 0.8s ease-out;
          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.9);
          padding: 8px;
        }
      }
      
      .fruit-text {
        font-size: 1.8rem;
        font-weight: 800;
        color: #8b5a96;
        animation: textSlideUp 1s ease-out;
        font-family: 'Comic Sans MS', cursive, sans-serif;
        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
      }
    }
  }

  .game-complete {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    padding: 3.5rem;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(255, 107, 157, 0.4);
    backdrop-filter: blur(15px);
    border: 4px solid #ff6b9d;
    animation: gameCompleteSlide 1s ease-out;
    
    h2 {
      color: #ff6b9d;
      margin-bottom: 1.5rem;
      font-size: 2.5rem;
      font-family: 'Comic Sans MS', cursive, sans-serif;
      text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
      animation: celebrationBounce 1s ease-in-out infinite;
    }
    
    p {
      color: #8b5a96;
      margin-bottom: 2.5rem;
      font-size: 1.5rem;
      font-family: 'Comic Sans MS', cursive, sans-serif;
      font-weight: 600;
      text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    }
    
    .btn {
      padding: 1.2rem 2.5rem;
      border: 3px solid #fff;
      border-radius: 30px;
      font-size: 1.3rem;
      cursor: pointer;
      transition: all 0.4s ease;
      background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
      color: white;
      font-weight: 800;
      font-family: 'Comic Sans MS', cursive, sans-serif;
      box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
      animation: btnPulse 2s ease-in-out infinite;
      
      &:hover {
        background: linear-gradient(135deg, #45b7aa 0%, #3d8b7a 100%);
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 10px 30px rgba(78, 205, 196, 0.6);
      }
      
      &:active {
        transform: translateY(-1px) scale(0.98);
      }
    }
  }
}

// 动画定义
@keyframes titleBounce {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.05) translateY(-5px);
  }
}

@keyframes statPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(255, 107, 157, 0.3);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 12px 25px rgba(255, 107, 157, 0.5);
  }
}

@keyframes gameAreaGlow {
  0% {
    box-shadow: 0 12px 40px rgba(255, 107, 157, 0.4);
  }
  100% {
    box-shadow: 0 15px 50px rgba(255, 107, 157, 0.6);
  }
}

@keyframes listFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes imageBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes restoreBtnPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes bubbleShine {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes fruitDisplayGlow {
  0% {
    box-shadow: 0 15px 40px rgba(255, 107, 157, 0.4);
  }
  100% {
    box-shadow: 0 20px 50px rgba(255, 107, 157, 0.6);
  }
}

@keyframes celebrationBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes btnPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes bubbleFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
  }
}

@keyframes bubblePop {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes fruitBounce {
  0% {
    transform: scale(0) rotate(-180deg);
  }
  50% {
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes textSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gameCompleteSlide {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bubbleRestore {
  0% {
    opacity: 0;
    transform: scale(0) rotate(180deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

// 响应式设计
@media (max-width: @screen-md) {
  .bubble-game {
    padding: 1rem;
    
    .game-header {
      .header-top {
        gap: 1rem;
      }
      
      .game-title {
        font-size: 2rem;
      }
      
      
      .game-stats {
        gap: 1.5rem;
        
        .stat {
          padding: 0.75rem 1.5rem;
          
          .stat-value {
            font-size: 1.5rem;
          }
        }
      }
    }
    
    .game-area {
      height: 60vh;
    }
    
    .fruit-display {
      .fruit-content {
        padding: 1.5rem 2rem;
        
        .fruit-image .fruit-emoji {
          font-size: 3rem;
        }
        
        .fruit-text {
          font-size: 1.2rem;
        }
      }
    }
    
    // 全屏状态下的移动端优化
    &.fullscreen {
      .game-header {
        .game-title {
          font-size: 2rem;
        }
        
      }
      
      .game-area {
        height: calc(100vh - 220px);
      }
    }
    
    // 破灭泡泡列表响应式
    .popped-bubbles-list {
      max-width: 250px;
      top: 15px;
      left: 15px;
      
      .list-title {
        font-size: 1rem;
      }
      
      .bubbles-list {
        .popped-bubble-item {
          padding: 0.4rem;
          gap: 0.5rem;
          
          .bubble-number {
            width: 20px;
            height: 20px;
            font-size: 0.7rem;
          }
          
          .bubble-emoji {
            font-size: 1.2rem;
          }
          
          .bubble-name {
            font-size: 0.8rem;
          }
          
          .delete-btn {
            width: 20px;
            height: 20px;
            font-size: 0.7rem;
          }
        }
      }
    }
  }
}

@media (max-width: @screen-sm) {
  .bubble-game {
    .game-header {
      .header-top {
        flex-direction: column;
        gap: 0.5rem;
      }
      
      .game-stats {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
      }
    }
    
    .game-area {
      height: 50vh;
    }
    
    // 全屏状态下的超小屏幕优化
    &.fullscreen {
      .game-header {
        .header-top {
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }
        
        .game-title {
          font-size: 1.8rem;
        }
        
      }
      
      .game-area {
        height: calc(100vh - 200px);
      }
    }
    
    // 破灭泡泡列表小屏幕优化
    .popped-bubbles-list {
      max-width: 200px;
      top: 10px;
      left: 10px;
      padding: 0.75rem;
      max-height: 50vh;
      
      .list-title {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
      }
      
      .bubbles-list {
        gap: 0.4rem;
        
        .popped-bubble-item {
          padding: 0.3rem;
          gap: 0.4rem;
          
          .bubble-number {
            width: 18px;
            height: 18px;
            font-size: 0.6rem;
          }
          
          .bubble-emoji {
            font-size: 1rem;
          }
          
          .bubble-name {
            font-size: 0.75rem;
          }
          
          .delete-btn {
            width: 18px;
            height: 18px;
            font-size: 0.6rem;
          }
        }
      }
    }
  }
}
</style>
